<template>
  <el-row :gutter="20" style="margin-left: 0; margin-right: 0">
    <el-col
      :span="18"
      :offset="0"
      id="map-container"
      :style="{ width: mapContainerWidth }"
    >
      <div id="mapViewDiv"></div>
      <div id="baseMapTab">
        <basemap-tab :mapview="mapview" v-if="isMapCreated"></basemap-tab>
      </div>
      <map-tools
        id="mapToolBar"
        ref="mapToolBar"
        :showquerybtn="showquerybtn"
        :mapview="mapview"
        :switchquerypanel="switchShowQueryPanel"
        @extentChange="extentChanged"
        @clear="cleared"
        @measureWidgetRemoved="measureWidgetRemoved"
        @measureWidgetAdded="measureWidgetAdded"
      ></map-tools>
      <tdt-search  v-show="showsearchbtn" id="tdtSearch" :mapview="mapview"></tdt-search>
      <div id="xzqhWidget">
        <xzqh-select
          :mapview="mapview"
          @change="xzqhChanged"
          v-show="showxzqh"
        ></xzqh-select>
      </div>

      <map-editor id="mapEditorTool" v-if="isShowEditor"></map-editor>
      <slot name="topLeft"></slot>
      <slot name="topRight" id="topRight"></slot>
      <slot name="bottomLeft" id="bottomLeft"></slot>
      <slot name="bottomRight" id="bottomRight"></slot>
    </el-col>
    <result-dialog ref="resultDialog"></result-dialog>
  </el-row>
</template>
<script>
import TileInfo from "@arcgis/core/layers/support/TileInfo";
import MapView from "@arcgis/core/views/MapView";
import Map from "@arcgis/core/Map";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import BaseMapComponents from "./BaseMapComponents";
import MapToolsComponents from "./MapToolsComponents";
import MapEditorToolsComponets from "./MapEditorToolsComponets";
import { mapGetters } from "vuex";
import xzqhSelect from "./xzqhSelectComponents";
import resultDialog from "./resultDialog";
import Legend from "@arcgis/core/widgets/Legend";
import Expand from "@arcgis/core/widgets/Expand";
import Basemap from "@arcgis/core/Basemap";
import TileLayer from "@arcgis/core/layers/TileLayer";
import TdtSearch from "./TdtSearch.vue";
export default {
  name: "mapContainer",
  props: {
    operatelayers: { default: () => {} },
    showsearchbtn: {
      type: Boolean,
      default: false,
    },
    showtopleft: {
      type: Boolean,
      default: false,
    },
    showtopright: {
      type: Boolean,
      default: false,
    },
    showbottomleft: {
      type: Boolean,
      default: false,
    },
    showbottomright: {
      type: Boolean,
      default: false,
    },
    showquerybtn: {
      type: Boolean,
      default: false,
    },
    showxzqh: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    "basemap-tab": BaseMapComponents,
    "map-tools": MapToolsComponents,
    "map-editor": MapEditorToolsComponets,
    "tdt-search": TdtSearch,
    resultDialog,
    xzqhSelect,
  },
  data() {
    return {
      isMapCreated: false,
      isShowEditor: false,
      mapview: null,
      currentbasemap: null,
      isShowLegend: false,
      show3D: false,
      show2D: true,
      showQueryPanel: false,
      mapContainerWidth: "100%",
      currentQueryResults: undefined,
      homeViewpoint: undefined,
      vectorBaseMap: undefined,
      imageBaseMap: undefined,
    };
  },
  computed: {
    ...mapGetters("mapStore", [
      "dianzldFeatureLayer",
      "qitaldFeatureLayer",
      "roadldFeatureLayer",
      "gusmmFeatureLayer",
      "greenlandLayers",
      "shequFeatureLayer",
    ]),
  },
  created() {},
  provide() {
    return {
      sendQueryResults: this.receiveQueryResults,
      switchShowQueryPanel: this.switchShowQueryPanel,
      showResultDialog: this.showResultDialog,
      showDetailDialog: this.showDetailDialog,
    };
  },
  mounted() {
    this.init2DMapView();
  },
  watch: {},
  methods: {
    //获取子组件传递的数据查询结果
    receiveQueryResults(results) {
      this.currentQueryResults = results;
    },
    //是否显示右侧查询面板
    switchShowQueryPanel(status) {
      if (status) {
        this.mapContainerWidth = undefined;
        this.showQueryPanel = true;
      } else {
        this.mapContainerWidth = "100%";
        this.showQueryPanel = false;
      }
    },
    init2DMapView() {
      let _self = this;
      let imageLayer = undefined;
      let imageAnoLayer = undefined;
      let vectorLayer = undefined;
      let vectorAnoLayer = undefined;
      const webMap = new Map({});
      this.imageBaseMap = new Basemap({
        id: "imageBaseMap",
        title: "影像底图",
        // baseLayers: [imageLayer, imageAnoLayer],
      });
      // 影像底图图层
      if (
        window.mapConfig.baseMapLayers.imageLayer.type === "tdt-tile" &&
        window.mapConfig.baseMapLayers.imageLayer.url
      ) {
        imageLayer = new WebTileLayer({
          title: "天地图影像底图图层",
          urlTemplate: window.mapConfig.baseMapLayers.imageLayer.url,
          subDomains: window.mapConfig.tdtSubDomains,
          tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
          spatialReference: {
            wkid: 4490,
          },
          fullExtent: {
            xmin: -180,
            ymin: -90,
            xmax: 180,
            ymax: 90,
            spatialReference: 4490,
          },
        });
        this.imageBaseMap.baseLayers.add(imageLayer);
      } else if (window.mapConfig.baseMapLayers.imageLayer.url) {
        imageLayer = new TileLayer({
          title: "影像底图图层",
          url: window.mapConfig.baseMapLayers.imageLayer.url,
        });
        this.imageBaseMap.baseLayers.add(imageLayer);
      }
      // 影像注记图层
      if (
        window.mapConfig.baseMapLayers.imageAnoLayer.type === "tdt-tile" &&
        window.mapConfig.baseMapLayers.imageAnoLayer.url
      ) {
        imageAnoLayer = new WebTileLayer({
          title: "天地图影像注记图层",
          urlTemplate: window.mapConfig.baseMapLayers.imageAnoLayer.url,
          subDomains: window.mapConfig.tdtSubDomains,
          tileInfo: new TileInfo(window.mapConfig.tdtTileInfo),
          spatialReference: {
            wkid: 4490,
          },
          fullExtent: {
            xmin: -180,
            ymin: -90,
            xmax: 180,
            ymax: 90,
            spatialReference: 4490,
          },
        });
        this.imageBaseMap.baseLayers.add(imageAnoLayer);
      } else if (window.mapConfig.baseMapLayers.imageAnoLayer.url) {
        imageAnoLayer = new TileLayer({
          title: "影像注记图层",
          url: window.mapConfig.baseMapLayers.imageAnoLayer.url,
        });
        this.imageBaseMap.baseLayers.add(imageAnoLayer);
      }
      // 内网环境需要取消注释
      if (window.mapConfig.env === "kcy") webMap.basemap = this.imageBaseMap;
      //**************************************************************************//
      // 添加业务图层
      // AddOperationLayers();
      _self.mapview = new MapView({
        container: "mapViewDiv",
        map: webMap,
        center: window.mapConfig.mapcenter,
        scale: window.mapConfig.scale,
        // zoom: window.mapConfig.zoom,
        // spatialReference: window.mapConfig.mapcenter.spatialReference,
        // popup: {
        //   autoOpenEnabled: true,
        //   defaultPopupTemplateEnabled: false,
        // },
      });

      // 地图创建完成
      _self.isMapCreated = true;
      // _self.mapview.whenLayerView(tileImagelayerBase).then((layerView) => {
      //   _self.homeViewpoint = _self.mapview.viewpoint.clone();
      // });

      const legend = new Expand({
        content: new Legend({
          view: _self.mapview,
          style: "classic", //"card", //  'classic'
        }),
        view: _self.mapview,
        expanded: false,
      });
      _self.mapview.ui.add(legend, "bottom-left");
      // if (_self.showsearchbtn) _self.mapview.ui.add(searchWidget, "top-left");
      if (_self.showtopleft) _self.mapview.ui.add("topLeft", "top-left");
      if (_self.showtopright) _self.mapview.ui.add("topRight", "top-right");
      if (_self.showbottomleft)
        _self.mapview.ui.add("bottomLeft", "bottom-left");
      if (_self.showbottomright)
        _self.mapview.ui.add("bottomRight", "bottom-right");

      // if (_self.showxzqh) _self.mapview.ui.add("xzqhWidget", "top-left");
      _self.mapview.ui.add("mapToolBar", "top-right");
      _self.mapview.ui.add("tdtSearch", "top-left");
      // _self.mapview.ui.add("baseMapTab", "bottom-right");
      //删除默认版权文本属性
      _self.mapview.ui.remove("attribution");
      // 删除放大缩小按钮
      _self.mapview.ui.remove("zoom");

      // 给父组件传值
      _self.$emit("viewHandle", _self.mapview);
    },

    /**
     * @description: 显示查询结果窗口
     * @param {*} geometry
     * @return {*}
     */
    showResultDialog(geometry) {
      // "查看详情（" + row.objcode + "）";
      this.$refs.resultDialog.show(); // 显示弹框
      this.$refs.resultDialog.getList(this.mapview, geometry);
    },

    /**
     * @description: 显示详情窗口
     * @param {*} graphic
     * @return {*}
     */
    showDetailDialog(geometry) {
      // 根据不同的图层调用不同的详情窗口
      switch (graphic.layer) {
        case this.dianzldFeatureLayer:
          this.showDianzldDetail(graphic);
          break;
        // case _self.qitaldFeatureLayer:
        //   _self.showQitaldDetail(graphic);
        //   break;
        // case _self.roadldFeatureLayer:
        //   _self.showRoadldDetail(graphic);
        //   break;
        // case _self.gusmmFeatureLayer:
        //   _self.showGusmmDetail(graphic);
        //   break;
        default:
          this.showDianzldDetail(graphic);
          break;
      }
    },

    /**
     * @description: 显示点状绿地详情信息
     * @param {*} graphic
     * @return {*}
     */
    showDianzldDetail(graphic) {
      let _self = this;
      let queryParams = {
        outFields: ["*"],
        where: `objectid=${graphic.attributes["objectid"]}`,
        returnGeometry: true,
      };
      graphic.layer.queryFeatures(queryParams).then((featureSet) => {
        let feature = featureSet.features[0];
        // 显示弹框
        this.$refs.dianzldDetailDialog.show(
          _self.mapview,
          _self.dianzldFeatureLayerView,
          feature
        );
      });
    },
    /**
     * @description: 行政区划选择事件
     * @param {*} value
     * @return {*}
     */
    xzqhChanged(value) {
      this.$emit("xzqhChange", value);
    },

    /**
     * @description: 移除面积测量微件
     * @return {*}
     */
    areaWidgetRemoved() {
      this.$emit("areaWidgetRemoved");
    },

    /**
     * @description: 添加测量微件
     * @return {*}
     */
    measureWidgetAdded() {
      this.$emit("measureWidgetAdded");
    },
    /**
     * @description: 移除测量微件
     * @return {*}
     */
    measureWidgetRemoved() {
      this.$emit("measureWidgetRemoved");
    },
    /**
     * @description: 获取绘制的查询空间范围事件
     * @param {*} value
     * @return {*}
     */
    extentChanged(value) {
      this.$emit("extentChange", value);
    },
    /**
     * @description: 清空重置
     * @return {*}
     */
    cleared() {
      this.$emit("clear");
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container,
#mapViewDiv {
  position: relative;
  width: 100%;
  height: 100%;
}

#map-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

//底图切换面板
#baseMapTab {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

//行政区划导航
#xzqhWidget {
  position: absolute;
  top: 15px;
  left: 10px;
}

//地图工具条
.mapToolBa1r {
  position: fixed;
  right: 20px;
  top: 90px;
}

.query-container,
#map-container {
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}

.notShowQueryPanel {
  width: 100%;
}

//::v-deep .esri-view-user-storage {
//width: 700px;
//}

::v-deep .esri-button:hover,
.esri-elevation-profile__header button:hover {
  background-color: #0e8769;
  border: 1px solid #0e8769;
  color: #fff;
}

::v-deep .esri-button,
.esri-elevation-profile__header button {
  background-color: #409eff;
  border: 1px solid #409eff;
  color: #fff;
}
// 隐藏图例中的子标题
::v-deep .esri-legend__layer-caption {
  display: none;
}
// 设置图例面板的宽度
::v-deep .esri-ui-corner .esri-expand .esri-widget--panel {
  width: 200px;
}
::v-deep .esri-ui-inner-container,
.esri-ui-corner-container {
  inset: 15px 15px 0px;
}
</style>
